<!--
 * @Description: 设置页
 * @Author: wrysunny
 * @Date: 2024-11-18 18:25:17
 * @LastEditor: wrysunny
 * @LastEditTime: 2024-12-11 17:26:25
-->
<template>
	<view class="min-h-[100vh] bg-background p-[30rpx]">
		<view class="bg-white rounded-[16rpx] p-[30rpx]">
			<view class="mb-[24rpx] flex items-center justify-between">
				<view class="text-[28rpx] text-[#666]">用户头像</view>
				<view class="flex items-center">
					<button class="u-reset-button" open-type="chooseAvatar">
						<up-avatar :src="$setBaseUrl(store.userInfo.avatar)" size="72rpx"></up-avatar>
					</button>
					<up-icon name="arrow-right" size="30rpx"></up-icon>
				</view>
			</view>
			<view class="mb-[24rpx] flex items-center justify-between text-[28rpx]">
				<view class="text-[#666]">用户名</view>
				<view class="flex items-center">
					<view class="">
						<input type="nickname" placeholder="填写用户名" class="text-right" v-model="store.userInfo.nickName" @blur="updateUserInfoFn" />
					</view>
					<up-icon name="arrow-right" size="30rpx"></up-icon>
				</view>
			</view>
			<view class="mb-[24rpx] flex items-center justify-between text-[28rpx]">
				<view class="text-[#666]">个性签名</view>
				<view class="flex items-center">
					<view class="">
						<input type="text" placeholder="填写个性签名" class="text-right" v-model="store.userInfo.nickTitle" @blur="updateUserInfoFn" />
					</view>
					<up-icon name="arrow-right" size="30rpx"></up-icon>
				</view>
			</view>
			<view class="flex items-center justify-between text-[28rpx]">
				<view class="text-[#666]">生日</view>
				<view class="flex items-center" @click="openCalendar">
					<view class="">{{ store.userInfo.birthday ? timeFormat(store.userInfo.birthday, 'yyyy/mm/dd') : '完善信息' }}</view>
					<up-icon name="arrow-right" size="30rpx"></up-icon>
				</view>
			</view>
		</view>
		<view class="bg-white rounded-[16rpx] p-[30rpx] mt-[24rpx]">
			<view class="mb-[24rpx] flex items-center justify-between text-[28rpx]">
				<view class="text-[#666]">手机号</view>
				<view class="flex items-center">
					<view class="">
						<input type="number" placeholder="完善手机号" class="text-right" v-model="store.userInfo.phone" :disabled="store.userInfo.phone" @blur="bindPhoneFn" />
					</view>
					<up-icon name="arrow-right" size="30rpx"></up-icon>
				</view>
			</view>
			<view class="mb-[24rpx] flex items-center justify-between text-[28rpx]" @click="toAddressManagement">
				<view class="text-[#666]">收货地址</view>
				<view class="flex items-center">
					<up-icon name="arrow-right" size="30rpx"></up-icon>
				</view>
			</view>
			<view class="mb-[24rpx] flex items-center justify-between text-[28rpx]" @click="toAgreeMent(1)">
				<view class="text-[#666]">隐私协议</view>
				<view class="flex items-center">
					<up-icon name="arrow-right" size="30rpx"></up-icon>
				</view>
			</view>
			<view class="flex items-center justify-between text-[28rpx]" @click="toAgreeMent(0)">
				<view class="text-[#666]">用户协议</view>
				<view class="flex items-center">
					<up-icon name="arrow-right" size="30rpx"></up-icon>
				</view>
			</view>
		</view>
		<view class="py-[22rpx] bg-second w-full rounded-[16rpx] text-white text-[32rpx] text-center mt-[72rpx]" @click="loginOut">退出登录</view>
		<up-datetime-picker
			:show="calendarShow"
			v-model="store.userInfo.birthday"
			mode="date"
			@confirm="calendarConfirm"
			@cancel="closeCalendar"
			:confirmColor="calendarOption.color"
			:minDate="calendarOption.minDate"
			:maxDate="calendarOption.maxDate"
		></up-datetime-picker>
	</view>
</template>

<script setup>
import useUserInfo from '@/hooks/useUserInfo';
import { onLoad } from '@dcloudio/uni-app';
import { useLoginStore } from '@/store/login';
import { reactive, ref } from 'vue';
import { timeFormat } from '@/uni_modules/uview-plus';
onLoad(() => {
	getUserInfoFn();
});
const store = useLoginStore();
const { getUserInfoFn, updateUserInfoFn, loginOut, bindPhoneFn } = useUserInfo();
const { calendarShow, calendarConfirm, openCalendar, calendarOption, closeCalendar } = useCalendar();
/**
 * @description: 日历
 * @return
 */
function useCalendar() {
	const calendarShow = ref(false); //日历显示
	const calendarOption = reactive({
		mode: 'date',
		color: '#C39A71',
		minDate: +new Date('1824/01/01'),
		maxDate: +new Date()
	});
	const calendarConfirm = () => {
		store.userInfo.birthday = timeFormat(store.userInfo.birthday, 'yyyy-mm-dd');
		updateUserInfoFn();
		calendarShow.value = false;
	};
	const openCalendar = () => {
		if (!store.userInfo.birthday) {
			calendarShow.value = true;
		}
	};
	const closeCalendar = () => {
		calendarShow.value = false;
	};
	return {
		calendarShow,
		calendarConfirm,
		openCalendar,
		closeCalendar,
		calendarOption
	};
}
const toAddressManagement = () => {
	uni.navigateTo({
		url: '/pages/addressManagement/addressManagement'
	});
};
const toAgreeMent = (index) => {
	uni.navigateTo({
		url: '/pages/agreeent/agreeent?index=' + index
	});
};
</script>

<style lang="scss" scoped></style>
